<template>
  <view class="boxeca">
    <view class="zanwu">
      <view
        class="dabox"
        :class="{
          sssz: !mokong,
        }"
      >
        <image
          class="guos"
          mode="widthFix"
          :class="{
            moing: mokong,

            xian: !mokong,
          }"
          :src="props.url"
        >
        </image>
        <p
          v-show="!mokong"
          style="
            margin-top: 10rpx;
            font-weight: 700;
            white-space: nowrap;
            width: 150px;
            color: #3a3a3a;
            font-size: 32rpx;
            margin-bottom: 20rpx;
          "
        >
          {{ props.name }}
        </p>
      </view>
      <view
        v-show="mokong"
        style="font-size: 24rpx; color: #6a6a6a; line-height: 40rpx"
      >
        <p :title="props.name"
          style="
            font-weight: 700;
            white-space: nowrap;
            width: 150px;
            color: #3a3a3a;
            white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
            font-size: 32rpx;
            margin-bottom: 20rpx;
          "
        >
          {{ props.name }}
        </p>
        <p>
          <text> 状态：{{ status == 0 ? "运行中" : "断开连接" }} </text>
        </p>
        <p>
          <text> 温度：{{ props.value }}℃ </text>
        </p>
        <p></p>
        <p>今日出饭量：{{ MealAllowance }}份</p>
        <p>连续运行：{{ continuous }}h</p>
      </view>
      <view
        v-show="mokong"
        style="
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
        "
      >
        <view
          style="
            width: 15px;
            height: 15px;
            flex-shrink: 0;

            border: 2px solid #fff;
            border-radius: 50%;
          "
          :style="{
            background: props.bcolor,
            position: mokong ? '' : 'absolute',
            right: mokong ? '' : '10rpx',
          }"
        ></view>

        <view
          v-show="mokong"
          style="
            flex-shrink: 0;
            width: 120rpx;
            height: 120rpx;
            margin-top: 20px;
          "
          ><l-echart ref="chartRef"></l-echart
        ></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, inject, computed } from "vue";
interface datas {
  temperature: number; //温度
  status: number; //状态
  MealAllowance: number; //出饭量
  continuous: number; //运行时常
}
interface Props {
  url: string;
  status: number; //状态
  mokong: boolean;
  color?: (string | number)[][];
  value: number;
  zhicolor: string;
  bcolor: string;
  name: string;
  MealAllowance: number;
  data: datas;
  continuous: number; //
}

const props = withDefaults(defineProps<Props>(), {
  color: () => [
    [0.3, "#67e0e3"],
    [0.7, "#37a2da"],
    [1, "#fd666d"],
  ],
  MealAllowance: 0,
  value: 26,
  status: 0,
  zhicolor: "#5470c6",
  bcolor: "#4cd964",
  mokong: true,
  name: "打饭机",
  url: "/static/便携寿司饭团机.png",

  // data: () => {
  //   return {
  //     temperature: 20, //温度
  //     status: 1, //状态
  //     MealAllowance: 233, //出饭量
  //     continuous: 34, //运行时常
  //   };
  // },
  continuous: 0,
});

const echart = inject("echarts");

// 可是图
const chartRef = ref<any>(null);

onMounted(() => {
  // 组件能被调用必须是组件的节点已经被渲染到页面上
  setTimeout(async () => {
    if (!chartRef.value) return;

    const myChart = await chartRef.value.init(echart);
    myChart.setOption(option);
  }, 300);
});

const lineStyle = {
  width: 1,
  opacity: 0.5,
};
const option = {
  series: [
    {
      type: "gauge",
      min: 0,
      max: 200,
      axisLine: {
        show: true,
        lineStyle: {
          type: "solid",
          width: 6,
          color: props.color,
        },
      },
      pointer: {
        length: "100%",
        width: 4,
        offsetCenter: [0, 5],
      },
      itemStyle: {
        color: props.zhicolor,
      },
      axisTick: {
        show: false,
        distance: -30,
        length: 8,
        lineStyle: {
          color: "#fff",
          width: 2,
        },
      },
      splitLine: {
        type: "solid",
        length: 15,
        lineStyle: {
          color: "#fff",
          width: 0,
        },
      },
      axisLabel: {
        show: false, // 不显示刻度值
      },
      detail: {
        show: false, // 不显示刻度值
        valueAnimation: true,
        formatter: "{value} °C",
        color: "inherit",
      },
      data: [
        {
          value: props.value,
        },
      ],
    },
  ],
};
</script>

<style lang="scss" scoped>
.boxeca {
  position: relative;
  margin: 20rpx;
  background: #f7f7f7;
  border-radius: 40rpx;
  padding: 20rpx;
  box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.08);
}
.moing {
  width: 100%;
  flex-shrink: 0;
}
.dabox {
  width: 180rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sssz {
  width: 100%;
}
.guos {
  width: 220rpx;
  // height: 170rpx;
  transition: all 0.3s;
}
.xian {
  border-radius: 50%;

  flex-shrink: 0;
}
.bacc {
  background: linear-gradient(to bottom, #3280fe, #fefefe, #fefefe, #fefefe);
}
::v-deep .selected-area {
  color: #000 !important;
}
::v-deep .input-value-border {
  border: 0;
}
::v-deep .input-split-line {
  color: #000;
}
.selected {
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #fff;
}
.content {
  border: 0;

  .tt {
    font-size: 18px;
    padding: 0 20rpx 20px 20rpx;
    background-color: #3280fe;
  }
}
.xuanz {
  width: 600rpx;
  border-radius: 10rpx;
  padding: 30rpx;
  background-color: #fff;
  .btn {
    width: 200rpx;
  }
  .zhn {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30rpx;
    .biaoshi {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 200rpx;
      height: 200rpx;
      color: #fff;
      font-size: 14px;
      border-radius: 50%;
      background-color: #3280fe;
    }
  }
}
.yinas {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  border-radius: 50%;
  background: #3280fe;
}
.swiper_item {
  height: 150px;
  .sw_image {
    width: 100%;
    height: 150px;
  }
}

.fenye1 {
  padding: 0 5px;
  display: flex;
  justify-content: space-between;

  .fenyue2 {
    display: flex;

    flex-direction: column;
    margin-top: 20px;

    .fenyue2_img {
      width: 128rpx;
      height: 140rpx;
    }
  }
}
.floor-title {
  height: 60rpx;
  width: 100%;
  display: flex;
}
.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}
.serwch {
  position: sticky;

  top: 0;
  z-index: 9999;
}
.baox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.box {
  overflow: hidden;
}
.zanwu {
  height: 220rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10rpx;
  color: #3a3a3a;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
</style>
